@<template>
  <div class="detail-shop-info" >
    <div>
      <img :src="shop.logo" alt="" />
      <span>{{ shop.name }}</span>
    </div>
    <div class="shop-info">
      <span>
        <p>{{ shop.fans }}</p>
        <p>总销量</p>
      </span>
      <span>
        <p>{{ shop.goodsCount }}</p>
        <p>全部宝贝</p>
      </span>
      <div id='one-line'>

      </div>
      <span>
        <ul>
          <li v-for="(item, index) in shop.sells" :key="index">
            <span>{{ item.name }}</span>
            <span :class="{isright:item.isBetter}">    {{ item.score|xiaoshu }}</span>
            <span :class="{ishight:item.isBetter}"> {{ item.isBetter|isHight }}</span>
          </li>
        </ul>
      </span>
      
    </div>
    
   
  </div>
</template>

<script>
export default {
  props: {
    shop: {
      type: Object,
      default: {},
    },
   
  },
  filters:{
      xiaoshu(f){
          return f.toFixed(2);
      },
      isHight(result){
        return result ? '高' :'低'
      }
  }
};
</script>

<style>
li {
  list-style: none;
}
.detail-shop-info {
    width: 100%;
}
.detail-shop-info div:nth-of-type(1) img {
  width: 60px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  margin: 25px 10px;
  
}
.detail-shop-info div:nth-of-type(1) span {
  font-size: 18px;
}
.shop-info {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  
}
.shop-info #one-line {
    width: 1px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    height: 40px;
    margin-top: 5px;
}
.shop-info p {
  display: block;
  padding: 5px;
}
.shop-info span:nth-of-type(1) p:nth-of-type(1),
.shop-info span:nth-of-type(2) p:nth-of-type(1) {
    font-weight: 800;
    
}
.shop-info span:nth-of-type(1) p:nth-of-type(2),
.shop-info span:nth-of-type(2) p:nth-of-type(2) {
    font-size: 12px;
}



.shop-info span:nth-last-of-type(1) {
    display: inline-block;
    margin: 4px ;
    padding-left: 4px;
    text-align: left;
}
li span:nth-last-of-type(2) {
    color: green;
}

li :last-child {
    color: #fff;
    background-color: green;
    text-align: center;
}
li .ishight {
    background-color: red;
}
ul li .isright {
    color: red;
}

.shop-info ul {
    margin-top: -10px;
    font-size: 12px;
}
.shop-info ul li span:last-of-type{
    /* background-color: #fff; */
    padding: 0;
}

</style>